import { hospitals, delHospital } from '../../api'
import { useEffect } from 'react'
import { PageHeader, Breadcrumb, Button, Form, Input, Row, Col, Table, DatePicker, message, Popconfirm } from 'antd';
import { useState } from 'react'
import { useNavigate } from 'react-router-dom';

const { RangePicker } = DatePicker;


const confirm = (id) => {
    console.log(id);

    delHospital({ id })
        .then(res => {
            console.log(res)
            if (res.data.code == 200) {
                message.success('删除成功！');
            }
        })


};

const cancel = (e) => {
    console.log(e);
    message.error('Click on No');
};


export default () => {

    const [hospitalList, setHospitalList] = useState([])

    // 分页
    const [currentPage, setCurrentPage] = useState(1)

    // 这是一个副作用钩子，生命周期函数。在进入组件和组件数据跟新时触发
    useEffect(() => {
        // 判断，如果没有数据，再调用接口，获得数据
        if (hospitalList.length <= 0) {
            hospitals()
                .then(res => {
                    console.log(res)

                    let data = res.data.data;
                    data = data.map((item, index) => {
                        item.key = index + 1
                        return item
                    })
                    setHospitalList(data)
                })
        }

    })


    const onFinish = (form) => {

        let data = {}
        if (form['open-time']) {
            let start = form['open-time'][0].format("YYYY-MM-DD")
            let end = form['open-time'][1].format("YYYY-MM-DD")

            data['open-time'] = start + ',' + end
        }

        data.name = form.name;
        data.address = form.address

        hospitals(data)
            .then(res => {
                console.log(res)
                let data = res.data.data
                data = data.map(item =>{
                    item.key = item.id;
                    return item
                })

                setHospitalList(data)
            })


    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '医院名称',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '医院地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '营业时间',
            dataIndex: 'open-time',
            key: 'open-time',
        },
        {
            title: '操作',
            key: 'open-time',
            render(item) {
                return (
                    <>
                        <Button type='success' onClick={() => {
                            navigate(`/edit-hospital?id=${item.id}`)
                        }}>修改</Button>
                        <Button type='danger' onClick={() => {

                        }}>
                            <Popconfirm
                                title="确认删除?"
                                onConfirm={(e) => {
                                    confirm(item.id)
                                }}
                                onCancel={cancel}
                                okText="Yes"
                                cancelText="No"
                            >
                                <a href="#">删除</a>
                            </Popconfirm>
                        </Button>
                    </>
                )
            }
        },

    ];

    // 编程式导航
    const navigate = useNavigate()


    return (
        <>
            {/* 页面头部 */}
            <PageHeader
                className="site-page-header"
                onBack={() => null}
                title="诊所信息"
                subTitle="This is a subtitle"
            >
                <Breadcrumb>
                    <Breadcrumb.Item>诊所管理</Breadcrumb.Item>
                    <Breadcrumb.Item>诊所信息</Breadcrumb.Item>
                </Breadcrumb>
            </PageHeader>
            {/* 搜索框 */}
            <div className='border-box pad-0-12 bg-white pad-top-20' >
                <Form name="basic" onFinish={onFinish}>
                    <Row gutter={16}>
                        <Col span={7}>
                            <Form.Item label="诊所名称" name="name">
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={7}>
                            <Form.Item label="诊所地址" name="address">
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={7}>
                            <Form.Item label="入住时间" name="open-time">
                                <RangePicker placeholder={['开始', '结束']} />
                            </Form.Item>
                        </Col>
                        <Col span={3}>
                            <Form.Item>
                                <Button htmlType='submit' type='primary'>查询</Button>
                            </Form.Item>
                        </Col>

                    </Row>
                </Form>
            </div>
            {/* 添加医院按钮 */}
            <div className='border-box pad-0-12 margin-top-12' >
                <Button type='danger' onClick={() => {
                    navigate("/edit-hospital")
                }}>添加医院 </Button>
            </div>
            {/* 医院表格 */}
            <Table
                dataSource={hospitalList}
                columns={columns}
                pagination={{
                    current: currentPage,
                    onChange(page) {
                        setCurrentPage(page)
                    },
                    pageSize: 10,
                    total: hospitalList.length
                }} />
        </>
    )
}